{% extends 'base.html' %}
{% load static %}

{% block title %}登录 - 本地有约{% endblock %}

{% block extra_css %}
<style>
    .login-container {
        min-height: calc(100vh - 200px);
        display: flex;
        align-items: center;
        padding: 2rem 0;
    }
    
    .login-card {
        background: white;
        border-radius: 1.5rem;
        box-shadow: 0 10px 40px rgba(0,0,0,0.1);
        overflow: hidden;
    }
    
    .login-left {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 3rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    .login-left h2 {
        font-weight: 700;
        margin-bottom: 1rem;
    }
    
    .login-right {
        padding: 3rem;
    }
    
    .social-login {
        display: flex;
        gap: 1rem;
        margin-top: 1.5rem;
    }
    
    .social-btn {
        flex: 1;
        padding: 0.75rem;
        border: 2px solid #e2e8f0;
        border-radius: 0.5rem;
        background: white;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .social-btn:hover {
        border-color: var(--primary-color);
        background: #f7fafc;
    }
</style>
{% endblock %}

{% block content %}
<div class="login-container">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-10">
                <div class="login-card row g-0">
                    <!-- 左侧装饰 -->
                    <div class="col-md-5 login-left d-none d-md-block">
                        <i class="fas fa-calendar-alt fa-5x mb-4"></i>
                        <h2>欢迎来到本地有约</h2>
                        <p class="lead">发现身边有趣的活动，结识志同道合的朋友</p>
                        <ul class="list-unstyled mt-4">
                            <li class="mb-2"><i class="fas fa-check-circle me-2"></i> 海量本地活动</li>
                            <li class="mb-2"><i class="fas fa-check-circle me-2"></i> 智能活动推荐</li>
                            <li class="mb-2"><i class="fas fa-check-circle me-2"></i> 积分奖励机制</li>
                            <li class="mb-2"><i class="fas fa-check-circle me-2"></i> 安全可靠</li>
                        </ul>
                    </div>
                    
                    <!-- 右侧登录表单 -->
                    <div class="col-md-7 login-right">
                        <h3 class="mb-4">登录账号</h3>
                        
                        <!-- 登录表单 -->
                        <form id="loginForm" method="post">
                            {% csrf_token %}
                            
                            <div class="mb-3">
                                <label for="username" class="form-label-custom">
                                    <i class="fas fa-user me-1"></i> 用户名/手机号/邮箱
                                </label>
                                <input type="text" 
                                       class="form-control form-control-custom" 
                                       id="username" 
                                       name="username" 
                                       placeholder="请输入用户名、手机号或邮箱"
                                       required>
                            </div>
                            
                            <div class="mb-3">
                                <label for="password" class="form-label-custom">
                                    <i class="fas fa-lock me-1"></i> 密码
                                </label>
                                <div class="input-group">
                                    <input type="password" 
                                           class="form-control form-control-custom" 
                                           id="password" 
                                           name="password" 
                                           placeholder="请输入密码"
                                           required>
                                    <button class="btn btn-outline-secondary" type="button" id="togglePassword">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </div>
                            </div>
                            
                            <div class="mb-3 form-check">
                                <input type="checkbox" class="form-check-input" id="remember" name="remember">
                                <label class="form-check-label" for="remember">
                                    记住我
                                </label>
                                <a href="{% url 'users:forgot_password' %}" class="float-end text-decoration-none">忘记密码？</a>
                            </div>
                            
                            <button type="submit" class="btn btn-gradient-primary w-100 mb-3">
                                <i class="fas fa-sign-in-alt me-1"></i> 登录
                            </button>
                            
                            <div class="text-center">
                                还没有账号？<a href="{% url 'users:register' %}" class="text-decoration-none">立即注册</a>
                            </div>
                        </form>
                        
                        <!-- 社交登录 -->
                        <div class="divider my-4">
                            <span class="text-muted">或使用以下方式登录</span>
                        </div>
                        
                        <div class="social-login">
                            <button class="social-btn" onclick="socialLogin('wechat')">
                                <i class="fab fa-weixin fa-2x text-success"></i>
                            </button>
                            <button class="social-btn" onclick="socialLogin('qq')">
                                <i class="fab fa-qq fa-2x text-primary"></i>
                            </button>
                            <button class="social-btn" onclick="socialLogin('weibo')">
                                <i class="fab fa-weibo fa-2x text-danger"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // 切换密码显示/隐藏
    document.getElementById('togglePassword').addEventListener('click', function() {
        const passwordInput = document.getElementById('password');
        const icon = this.querySelector('i');
        
        if (passwordInput.type === 'password') {
            passwordInput.type = 'text';
            icon.classList.remove('fa-eye');
            icon.classList.add('fa-eye-slash');
        } else {
            passwordInput.type = 'password';
            icon.classList.remove('fa-eye-slash');
            icon.classList.add('fa-eye');
        }
    });
    
    // 登录表单提交
    document.getElementById('loginForm').addEventListener('submit', function(e) {
        e.preventDefault();
        
        // 直接获取表单字段值
        const username = document.getElementById('username').value.trim();
        const password = document.getElementById('password').value;
        const remember = document.getElementById('remember').checked;
        
        // 验证必填字段
        if (!username) {
            showError('请输入用户名、邮箱或手机号');
            return;
        }
        
        if (!password) {
            showError('请输入密码');
            return;
        }
        
        // 准备提交的数据
        const data = {
            username: username,
            password: password,
            remember: remember
        };
        
        console.log('登录数据:', { username, password: '***', remember });
        
        // 发送登录请求
        API.users.login(data)
            .then(response => {
                console.log('登录响应:', response.data);
                if (response.data.code === 200) {
                    showSuccess('登录成功！正在跳转...');
                    setTimeout(() => {
                        // 跳转到主页或指定页面
                        const redirectUrl = response.data.redirect || '/';
                        console.log('跳转到:', redirectUrl);
                        window.location.href = redirectUrl;
                    }, 800);
                } else {
                    showError(response.data.message || '登录失败');
                }
            })
            .catch(error => {
                console.error('登录错误:', error);
                const errorMsg = error.response?.data?.message || '登录失败，请检查用户名和密码';
                showError(errorMsg);
            });
    });
    
    // 社交登录
    function socialLogin(platform) {
        showError('第三方登录功能暂未开放');
    }
</script>
{% endblock %}
